<template>
	<view class="wrap">
		<u-navbar :title="$t('smrz')" title-width="340" :border-bottom="false" back-icon-color="#fff" title-color="#fff" :background="{ backgroundColor: '#0030A8' }"></u-navbar>
		<view class="tom-container">
			<view class="card front">
				<view class="card-title">{{$t('scsfzzm')}}</view>
				<view class="card-main">
					<image @click="upload('frontImg')" v-if="!frontImg.fileUrl" class="img-tips" src="/static/certification1.png"></image>
					<image @click="upload('frontImg')" v-else class="img" :src="frontImg.fileUrl"></image>
				</view>
			</view>
			<view class="card back">
				<view class="card-title">{{$t('scsfzfm')}}</view>
				<view class="card-main">
					<image @click="upload('backImg')" v-if="!backImg.fileUrl" class="img-tips" src="/static/certification2.png"></image>
					<image @click="upload('backImg')" v-else class="img" :src="backImg.fileUrl"></image>
				</view>
			</view>
			<view class="login_btn" @tap="submit" v-if="sts == 0">{{ $t('queding') }}</view>
			<view class="login_btn" @tap="submit" v-if="sts == 1">{{ $t('shz') }}</view>
			<view class="login_btn" @tap="submit" v-if="sts == 2">{{ $t('shtg') }}</view>
			<view class="login_btn" @tap="submit" v-if="sts == 3">{{ $t('ybh') }}</view>
		</view>
		<helang-compress ref="helangCompress"></helang-compress>
	</view>
</template>

<script>
	import helangCompress from '@/components/helang-compress/helang-compress';
	export default {
		data() {
			return {
				frontImg: {},
				backImg: {},
				sts: 0, // 0：未提交 1：已提交 2：审核通过 3：已驳回
			};
		},
		components: {
			helangCompress
		},
		onLoad() {
			this.getRealNameAuthenticationInfo();
			this.sts = this.$store.getters.authenticStatus;
		},
		filters: {
			formatSts(val) {
				if (val == 0) return this.$t('queding');
				if (val == 1) return this.$t('shz');
				if (val == 2) return this.$t('shtg');
				if (val == 3) return this.$t('ybh');
			}
		},
		methods: {
			// 实名信息
			getRealNameAuthenticationInfo() {
				this.$api.userApi.getRealNameAuthenticationInfo()
					.then(res => {
						this.frontImg = {
							fileUrl: res.data.fileUrls[0] || ''
						};
						this.backImg = {
							fileUrl: res.data.fileUrls[1] || ''
						};
						this.sts = res.data.sts;
					})
			},
			// 上传
			upload(type) {
				if (this.sts == 2 || this.sts == 1) return;
				let that = this;
				uni.chooseImage({
					count: 1,
					success(res) {
						that.$utils.loading(this.$t('zztjz'))
						that.$refs.helangCompress.compress({
							src: res.tempFilePaths[0],
							maxSize: 750,
							fileType: 'jpg',
							quality: 0.85,
							minSize: 500 //最小压缩尺寸，图片尺寸小于该时值不压缩，非H5平台有效。若需要忽略该设置，可设置为一个极小的值，比如负数。
						}).then(async (res) => {
							// 压缩成功回调
							// console.log(res)
							that.$utils.toast(this.$t('sccg'))
							that[type] = await that.$utils.upload(res);
							console.log(that[type])
							console.log(that.frontImg)
							console.log(that.backImg)
						}).catch((err) => {
							that.$utils.toast(this.$t('tpyssb'))
							// 压缩失败回调
							console.log(err)
						})
					}
				})
			},
			// 提交
			submit() {
				console.log(this.frontImg.fileUrl)
				if (this.sts == 2 || this.sts == 1) return;
				if (!this.frontImg.fileUrl) return this.$utils.toast(this.$t('qscsfzzm'));
				if (!this.backImg.fileUrl) return this.$utils.toast(this.$t('qscsfzfm'));
				this.$utils.loading(this.$t('zztjz'))
				let arr = [this.frontImg, this.backImg]
				this.$api.userApi.applyForRealNameAuthentication(arr)
					.then(res => {
						this.$utils.toast(res.data)
						this.sts = 1;
						uni.hideLoading();
						setTimeout(function() {
							uni.switchTab({
							    url: '/pages/User/User'
							});
						}, 1000);
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		.tom-container {
			background-color: #fff;
		}

		.card {
			margin-top: 40rpx;
			padding: 0 30rpx;

			&-title {
				color: $tom-text-color;
				font-size: 28rpx;
				font-weight: bold;
			}

			&-main {
				margin-top: 28rpx;
				height: 330rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #FAFAFA;

				.img-tips {
					width: 190rpx;
					height: 130rpx;
				}

				.img {
					width: 600rpx;
					height: 300rpx;
				}
			}
		}

		.front {
			margin-top: 50rpx;
		}
	}

	.btnOk {
		font-size: 32rpx;
		font-weight: bold;
		padding: 16rpx 60rpx;
		background: linear-gradient(90deg, #3C0E58, #480E66, #43115C);
		border-radius: 40px;
		display: inline-block;
		margin: 100rpx 0;
		color: #fff;
	}
</style>
